<template>
  <el-form ref="formRef" :model="formInfo" :rules="rules" label-width="120px">
    <el-form-item v-for="item in formItems" :label="`${item.label}：`" :prop="item.prop" :key="item.prop">
      <el-input v-if="item.itemType === 'input'" :type="item.inputType ? item.inputType : 'text'"
        v-model.trim="formInfo[item.prop]" :placeholder="`请输入${item.label}`" :maxlength="item.maxlength"
        clearable></el-input>
      <el-input-number v-else-if="item.itemType === 'inputNumber'" v-model.trim="formInfo[item.prop]"
        :placeholder="`请输入${item.label}`" :min="item.min" :max="item.max" clearable style="width: 50%"></el-input-number>
      <el-input v-else-if="item.itemType === 'textarea'" type="textarea" v-model.trim="formInfo[item.prop]"
        :placeholder="`请输入${item.label}`" :maxlength="item.maxlength" :autosize="item.autosize" clearable></el-input>
      <el-select v-else-if="item.itemType === 'select'" v-model="formInfo[item.prop]" :placeholder="`请选择${item.label}`"
        clearable style="width: 100%">
        <el-option v-for="op in item.optionsList" :key="op.value" :value="op.value" :label="op.label" />
      </el-select>
      <el-cascader v-else-if="item.itemType === 'cascader'" v-model="formInfo[item.prop]"
        :placeholder="`请选择${item.label}`" :options="item.optionsList" :props="{
          checkStrictly: true,
          ...item.extraProps,
        }" clearable></el-cascader>
      <el-checkbox-group v-else-if="item.itemType === 'checkbox'" v-model="formInfo[item.prop]">
        <el-checkbox v-for="op in item.optionsList" :key="op.value" :label="op.label" :value="op.value"></el-checkbox>
      </el-checkbox-group>
      <el-date-picker v-else-if="item.itemType === 'datePicker'" v-model="formInfo[item.prop]"
        :type="item.dateType ? item.dateType : 'date'" :placeholder="`请选择${item.label}`">
      </el-date-picker>
      <el-radio-group v-else-if="item.itemType === 'radio'" v-model="formInfo[item.prop]">
        <el-radio v-for="op in item.optionsList" :label="op.label" :value="op.value" :key="op.value"></el-radio>
      </el-radio-group>
      <el-switch v-else-if="item.itemType === 'switch'" v-model="formInfo[item.prop]">
      </el-switch>
      <p v-else>
        <slot :name="item.prop"></slot>
      </p>
    </el-form-item>
  </el-form>
</template>
<script lang='ts' setup>
import { BasicFormItem, FormInfo } from "./BasicFormTypes";
import type { FormInstance, FormRules } from 'element-plus';

// ref
const formRef = ref<FormInstance>();

//表单数据 
const formInfo = reactive<FormInfo>({});

// 传入的一些配置项
const props = defineProps({
  formItems: {
    required: true,
    type: Array as PropType<Array<BasicFormItem>>,
    default: () => {
      return [] as Array<BasicFormItem>;
    }
  },
  rules: {
    type: Object as PropType<FormRules>,
    default: () => {
      return {};
    }
  }
})

// 校验方法
async function handleValidate(callback: Function) {
  await formRef.value.validate(valid => {
    if (valid) {
      callback && callback(formInfo);
    }
  })
}

defineExpose({
  formRef,
  handleValidate
});

</script>

<style scoped lang="scss"></style>